<template>
  <div>
    <upload-image
      v-bind="$attrs"
      :value="value"
      :show-file-list="false"
      @input="onInput"
    ></upload-image>
    <div class="img-wrapper" v-if="value">
      <i class="close el-icon el-icon-close" @click="clear"></i>
      <my-image :src="value" />
    </div>
  </div>
</template>

<script>
export default {
  name: "upload-img",
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  methods: {
    onInput(val) {
      this.$emit("input", val);
    },
    clear() {
      this.$emit("input", "");
    }
  }
};
</script>
<style lang="scss" scoped>
.img-wrapper {
  position: relative;
  .close {
    position: absolute;
    z-index: 99;
    font-size: 24px;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }
}
</style>
